{% extends 'base.html' %} {% block css%}
<style type="text/css">
    .b1 {
        color: blue;
    }

    pre {
        width: 100%;
        background-color: #f5f5f5;
        padding: 20px;
        border-radius: 10px;
        border: 1px solid #ccc;
        font-family: Consolas, monospace;
        white-space: pre-wrap;  /* 保证长文本换行 */
        word-wrap: break-word;   /* 自动换行 */
        color: #333;
    }
</style>
{% endblock %} {% block body%}
<div class="row">

    <div class="col-md-4">
        <h4>TCP Server</h4>
        <table class="table table-hover form-inline">
            <tr>
                <td style="font-size: 12px" width="25%">IP Address</td>
                <td>
                    <input class="form-control" type="text" style="width:180px; height:30px" id="ip_val" value="192.168.10.10" />
                </td>
            </tr>
            <tr>
                <td style="font-size: 12px" width="25%">Port</td>
                <td>
                    <input class="form-control" type="text" style="width:180px; height:30px" id="port_val" value="31001" />
                </td>
            </tr>

            <tr>
                <td colspan="2">
                    <button class="btn btn-success" id="btn_connect">
                    Connect <i class='glyphicon glyphicon-flash'></i>
                    </button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="btn btn-primary" id="btn_connect_status">
                     Status
                    </button>
            
                </td>
            </tr>


        </table>
     


        <hr />
        <h4>API Debug</h4>
        <table class="table table-hover form-inline">
            <tr>
                <td style="font-size: 12px" width="25%">Name</td>
                <td>
                    <select class="form-control" style="width:300px; height:30px" id="api_name">

                            <!--
                            "1.机器人移动功能:          /api/move"
                            "2.移动取消功能:            /api/move/cancel"
                            "3.获取机器人当前全局状态:   /api/robot_status"
                            "4.获取机器人信息接口:       /api/robot_info"
                            "5.点位功能接口:             /api/markers/insert"
                            "6.机器人直接控制指令:       /api/joy_control"
                            "7.机器人急停控制指令:       /api/estop"
                            "8.校正机器人当前位置:       /api/position_adjust"
                            "9.请求机器人实时数据:       /api/request_data"
                            "10.机器人主动通知:          /api/xxxxxxxxxxx"
                            "11.设置参数:               /api/set_params"
                            "12.获取参数:               /api/get_params"
                            "13.无线网络接口:            /api/wifi/list"
                            "14.地图接口:                /api/map/list"
                            "15.关机重启接口:            /api/shutdown"
                            "16.软件更新接口:            /api/software/get_version"
                            "17.设置灯带接口:            /api/LED/set_luminance"
                            "18.自诊断接口:              /api/diagnosis/get_result"
                            "19.获取电源状态接口:         /api/get_power_status"
                            "20.获取机器人全局路径接口:   /api/get_planned_path"
                            "21.获取电梯状态接口:         /api/lift_status"
                            "22.获取两点间路径接口:       /api/make_plan"
                            "23.获取机器人当前位置接口:   /api/get_current_location"
                            -->

                        <option value="1.机器人移动功能:          /api/move">1.机器人移动功能:          /api/move</option>
                        <option value="2.移动取消功能:            /api/move/cancel">2.移动取消功能:            /api/move/cancel</option>
                        <option value="3.获取机器人当前全局状态:   /api/robot_status">3.获取机器人当前全局状态:   /api/robot_status</option>
                        <option value="4.获取机器人信息接口:       /api/robot_info">4.获取机器人信息接口:       /api/robot_info</option>
                        <option value="5.点位功能接口:             /api/markers/insert">5.点位功能接口:             /api/markers/insert</option>
                        <option value="6.机器人直接控制指令:       /api/joy_control">6.机器人直接控制指令:       /api/joy_control</option>
                        <option value="7.机器人急停控制指令:       /api/estop">7.机器人急停控制指令:       /api/estop</option>
                        <option value="8.校正机器人当前位置:       /api/position_adjust">8.校正机器人当前位置:       /api/position_adjust</option>
                        <option value="9.请求机器人实时数据:       /api/request_data">9.请求机器人实时数据:       /api/request_data</option>
                        <option value="10.机器人主动通知:          /api/xxxxxxxxxxx">10.机器人主动通知:          /api/xxxxxxxxxxx</option>
                        <option value="11.设置参数:               /api/set_params">11.设置参数:               /api/set_params</option>
                        <option value="12.获取参数:               /api/get_params">12.获取参数:               /api/get_params</option>
                        <option value="13.无线网络接口:            /api/wifi/list">13.无线网络接口:            /api/wifi/list</option>
                        <option value="14.地图接口:                /api/map/list">14.地图接口:                /api/map/list</option>
                        <option value="15.关机重启接口:            /api/shutdown">15.关机重启接口:            /api/shutdown</option>
                        <option value="16.软件更新接口:            /api/software/get_version">16.软件更新接口:            /api/software/get_version</option>
                        <option value="17.设置灯带接口:            /api/LED/set_luminance">17.设置灯带接口:            /api/LED/set_luminance</option>
                        <option value="18.自诊断接口:              /api/diagnosis/get_result">18.自诊断接口:              /api/diagnosis/get_result</option>
                        <option value="19.获取电源状态接口:         /api/get_power_status">19.获取电源状态接口:         /api/get_power_status</option>
                        <option value="20.获取机器人全局路径接口:   /api/get_planned_path">20.获取机器人全局路径接口:   /api/get_planned_path</option>
                        <option value="21.获取电梯状态接口:         /api/lift_status">21.获取电梯状态接口:         /api/lift_status</option>
                        <option value="22.获取两点间路径接口:       /api/make_plan">22.获取两点间路径接口:       /api/make_plan</option>
                        <option value="23.获取机器人当前位置接口:   /api/get_current_location">23.获取机器人当前位置接口:   /api/get_current_location</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="font-size: 12px" width="25%">Cmd</td>
                <td>
                    <input class="form-control" type="text" style="width:300px; height:30px" id="api_cmd" value="" />
                </td>
            </tr>
            <tr>
                <td style="font-size: 12px" width="25%">Params</td>
                <td>
                    <input class="form-control" type="text" style="width:300px; height:30px" id="api_params" value="" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button class="btn btn-success" id="btn_api_debug_send">
                    Send
                    </button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <i id="btn_api_debug_send_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                </td>
            </tr>

        </table>
     
        <hr />

        <h4>Camera Info</h4>
        <table class="table table-hover form-inline">
            <tr>
                <td style="font-size: 12px" width="25%">
                    supported_resolutions
                </td>
                <td>
                    <span id="supported_resolutions" style="color:#666;font-size: 12px">---</span>
                </td>
            </tr>
            <tr>
                <td style="font-size: 12px">
                    available_cameras
                </td>
                <td>
                    <span id="available_cameras" style="color:#666;font-size: 12px">---</span>
                </td>
            </tr>

            <tr>
                <td colspan="2">
                    <button class="btn btn-success" id="btn_cam_info">
                    Query Supported 
                    </button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <i id="btn_cam_info_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                </td>
            </tr>
        </table>

        <table class="table table-hover form-inline">
            <tbody id="camera_info1">

            </tbody>
            <tr>
                <td>
                Camera Index;&nbsp;&nbsp;
                <input class="form-control" type="text" style="width:80px; height:30px" id="cam_id" value=0 />
                </td>

                <td>
                    <button class="btn btn-success" id="btn_cam_info1">
                    Query by Camera Index
                    </button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <i id="btn_cam_info_loading1" class="fa fa-refresh fa-spin fa-fw"></i>
                </td>
            </tr>
        </table>

    </div>


    <div class="col-md-4">
        <h4>API Response Data</h4><small>JSON Data Tree View</small>
        <pre></pre>
    </div>



</div>




{% endblock %} {% block js%}
{{ super() }}
<script type="text/javascript">
// var zoom = 100; //default
/**
* Verify IP Address IPv4 *
*/
function fnValidateIPAddress(ipaddr) {
    //Only verify C-class address
    ipaddr = ipaddr.replace( /\s/g, "") 
    var re = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/; //regex. check for digits and in
                                          //all 4 quadrants of the IP
    if (re.test(ipaddr)) {
        //split into units with dots "."
        var parts = ipaddr.split(".");
        //if the first unit/quadrant of the IP is zero
        if (parseInt(parseFloat(parts[0])) == 0) {
            return false;
        }
        //if the fourth unit/quadrant of the IP is zero
        if (parseInt(parseFloat(parts[3])) == 0) {
            return false;
        }
        //if any part is greater than 255
        for (var i=0; i<parts.length; i++) {
            if (parseInt(parseFloat(parts[i])) > 255){
                return false;
            }
        }
        return true;
    } else {
        return false;
    }
}




$(document).ready(function() {
    $("#btn_cam_info_loading").hide();
    $("#btn_cam_info_loading1").hide();
    $("#btn_api_debug_send_loading").hide();

    toastr.options = {
        "closeButton": true,
        "positionClass": "toast-top-center"
    }
    // document.body.style.zoom = "100%"; 



    $("#btn_connect").click(function() {
        $.post(
            "/btn_connect", {
                ip_val: $("#ip_val").val(),
                port_val: $("#port_val").val()
            },
            function(data, status) {
                console.log("data: " + data);
                toastr["success"](data);

            }
        );
    });


    $("#btn_connect_status").click(function() {
        $.post(
            "/btn_connect_status", {

            },
            function(data, status) {
                console.log("data: " + data);
                //toastr["success"](data);
                if(data == "已连接")
                    $("#connect_status").html('<span class="label label-success">'+ data +'</span>');
                else
                    $("#connect_status").html('<span class="label label-warning">'+ data +'</span>');
            }
        );
    });


    $("#btn_cam_info").click(function() {
        $("#btn_cam_info_loading").show();
        $.post(
            "/btn_cam_info", {

            },
            function(data, status) {
                $("#btn_cam_info_loading").hide();
                console.log("data: " + data);
                //toastr["success"](data);
                d = data.split("|");

                $("#available_cameras").html(d[0]);
                $("#supported_resolutions").html(d[1]);
            }
        );
    });

    $("#btn_cam_info1").click(function() {
        $("#btn_cam_info_loading1").show();
        $.post(
            "/btn_cam_info1", {
                cam_id: $("#cam_id").val()
            },
            function(data, status) {
                $("#btn_cam_info_loading1").hide();
                console.log("data: " + data);
                //toastr["success"](data);
                $("#camera_info1").html(data);
            }
        );
    });

    //if api_name changed
    $("#api_name").change(function() {
        var api_name = $("#api_name").val();
        var api_cmd = api_name.split(":")[1].trim();
        $("#api_cmd").val(api_cmd);
    });
    

    $("#btn_api_debug_send").click(function() {
        $("#btn_api_debug_send_loading").show();
        $.post(
            "/btn_api_debug_send", {
                api_cmd: $("#api_cmd").val(),
                api_params: $("#api_params").val()
            },
            function(data, status) {
                $("#btn_api_debug_send_loading").hide();
                console.log("data: " + data);

                $("pre").html(data);

                //  layer.open({
                //      type: 1,
                //     title: 'API Debug',
                //    skin: 'layui-layer-rim', //加上边框
                //     area: ['420px', '240px'], //宽高
                //     content: data
                // });
            }
        );
    });

    


});
</script>
{% endblock %}